<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--树结构-->
      <el-col :span="4" :xs="24">
        <div class="app-container-tree-border">
          <el-input v-model="syTypeName" placeholder="请输入试验类别" clearable size="small" prefix-icon="el-icon-search" />
          <el-tree class="input-tree" :data="options" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" highlight-current @node-click="handleNodeClick">
            <div slot-scope="{node, data}" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
          </el-tree>
        </div>
      </el-col>

      <el-col :span="20" :xs="24">
        <div class="app-container-table-border">
          <el-row>
            <div class="above-table-row">
              <div v-show="oneShow">
                <el-row :gutter="10" class="mb8 sycs-add">
                  <el-col :offset="5" :span="14" class="text-center">
                    <span style="color: #515a6e;">所属试验报告：</span>
                    <span>{{ this.currentNode.label }}</span>
                  </el-col>
                  <el-col :span="5">
                    <el-button class="top-right-btn" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                  </el-col>
                </el-row>
                <el-table border stripe v-loading="loading" :data="bsJudgeBaseList" :height="tableHeight">
                  <el-table-column type="index" label="序号" align="center" prop="id" key="id" width="60" />
                  <el-table-column label="检测项目" align="center" prop="qualName" key="qualName" min-width="350" :show-overflow-tooltip="true" />
                  <!--                  <el-table-column label="检测项目" align="center" prop="itemName" key="itemName"-->
                  <!--                    min-width="350" :show-overflow-tooltip="true" />-->
                  <!--                <el-table-column label="单位" align="center" prop="qualUnit" key="qualUnit" :show-overflow-tooltip="true"/>-->
                  <el-table-column label="符号" align="center" prop="dictLabel" key="dictLabel" min-width="120" :show-overflow-tooltip="true" />
                  <el-table-column label="指标1" align="center" prop="num1" key="num1" min-width="120" :show-overflow-tooltip="true" />
                  <el-table-column label="指标2" align="center" prop="num2" key="num2" min-width="120" :show-overflow-tooltip="true" />
                  <el-table-column label="备注" align="center" prop="remark" key="remark" min-width="120" :show-overflow-tooltip="true" />
                  <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
              </div>

              <div v-show="threeShow">
                <el-row :gutter="10" class="mb8" style="margin-bottom: 55px;"></el-row>
                <el-table border stripe v-loading="loadingLeaf2" :data="syTypeList" :height="tableHeight">
                  <el-table-column type="index" label="序号" align="center" prop="judgeId" key="judgeId" width="60" />
                  <el-table-column label="所属试验" align="center" prop="parentName" min-width="360" key="parentName" :show-overflow-tooltip="true" />
                  <el-table-column label="试验名称" align="center" prop="syTypeName" key="syTypeName" min-width="360" :show-overflow-tooltip="true" />
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getTreeList" />
              </div>

              <div v-show="twoShow">
                <el-row :gutter="10" class="mb8 top-right-btn sycs-add">
                  <el-col :span="1">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddLeaf2">新增</el-button>
                  </el-col>
                </el-row>
                <el-table border stripe v-loading="loadingLeaf2" :data="syTypeList" :height="tableHeight">
                  <el-table-column type="index" label="序号" align="center" prop="judgeId" key="judgeId" width="60" />
                  <el-table-column label="所属试验" align="center" prop="parentName" key="parentName" min-width="360" :show-overflow-tooltip="true" />
                  <el-table-column label="判定依据名称" align="center" prop="judgeName" key="judgeName" min-width="360" :show-overflow-tooltip="true" />
                  <el-table-column label="排序" align="center" prop="sort" key="sort" width="120" :show-overflow-tooltip="true" />
                  <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateLeaf2(scope.row)">修改</el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteLeaf2(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getTreeList" />
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改判定依据信息 -->
    <jy-dialog :title="titleLeaf2" :visible.sync="openLeaf2" width="600px" append-to-body>
      <el-form ref="formLeaf2" :model="formLeaf2" :rules="rulesLeaf2" label-width="120px">
        <el-form-item label="所属试验">
          <div style="font-weight: bolder; font-size: 16px;">{{ this.currentNode.label }}</div>
        </el-form-item>
        <el-form-item label="判定依据名称" prop="judgeName">
          <el-input v-model="formLeaf2.judgeName" placeholder="请输入判定依据名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" v-model="formLeaf2.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" :loading="buttonLoadingLeaf2" type="primary" @click="submitFormLeaf2">确 定</el-button>
        <el-button size="small" @click="cancelLeaf2">取 消</el-button>
      </div>
    </jy-dialog>

    <!-- 添加或修改技术指标明细 -->
    <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="检测项目" prop="itemName">
          <!--          <el-input v-model="form.itemName" placeholder="请输入检测项目" clearable />-->
          <el-select v-model="form.refQualId" placeholder="请选择检测项目" style="width: 100%;" clearable>
            <el-option v-for="bi in this.biList" :key="bi.qualId" :label="bi.qualName+'('+bi.qualUnit+')'" :value="bi.qualId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="符号" prop="symbolValue">
          <el-select v-model="form.symbolValue" placeholder="请选择符号" style="width: 100%;" clearable>
            <el-option v-for="dict in dict.type.symbol" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术指标" prop="num1" v-if="isShow">
          <el-input v-model="form.num1" placeholder="请输入技术指标" clearable />
        </el-form-item>
        <el-form-item label="技术指标" prop="num1" v-if="!isShow">
          <el-row>
            <el-col span="11">
              <el-input v-model="form.num1" placeholder="请输入技术指标" clearable />
            </el-col>
            <el-col span="2">
              <div style="text-align: center;">~</div>
            </el-col>
            <el-col span="11">
              <el-input v-model="form.num2" placeholder="请输入技术指标" clearable />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </jy-dialog>
  </div>
</template>

<script>
import {
  listBsJudgeBase,
  syTpyeTree,
  listBsType,
  biList,
  bsJudgeBaseTreeBySyType,
  updateDetail,
  addDetail,
  getDetail,
  getBsJudgeBase,
  delDetail,
  delBsJudgeBase,
  addBsJudgeBase,
  updateBsJudgeBase
} from "@/api/sycs/bsJudgeBase";
import { listBiQualification } from "@/api/sycs/biQualification";

export default {
  name: "BsJudgeBase",
  dicts: ["symbol"],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      buttonLoadingLeaf2: false,
      // 遮罩层
      loading: true,
      loadingLeaf2: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 判定依据主表格数据
      bsJudgeBaseList: [],
      // 弹出层标题
      title: "",
      titleLeaf2: "",
      // 是否显示弹出层
      open: false,
      openLeaf2: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        judgeName: undefined,
        syType: undefined
      },
      // 表单参数
      form: {},
      formLeaf2: {},
      syTypeList: [],
      // 表单校验
      rules: {
        refQualId: [{ required: true, message: "检测项目不能为空", trigger: "change" }],
        // itemName: [
        //   { required: true, message: "检测项目不能为空", trigger: "change" }
        // ],
        symbolValue: [{ required: true, message: "符号不能为空", trigger: "change" }],
        num1: [{ required: true, message: "技术指标不能为空", trigger: "blur" }],
        num2: [{ required: true, message: "技术指标不能为空", trigger: "blur" }]
      },
      rulesLeaf2: {
        judgeName: [{ required: true, message: "判定依据名称不能为空", trigger: "blur" }],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }]
      },
      syTypeName: undefined,
      options: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 当前树节点
      currentNode: {},
      oneShow: false, // 点击树显示子表
      twoShow: false, // 点击显示树节点
      threeShow: false, // 点击显示判定依据
      biList: [], // 图鉴表
      isShow: true,
      tableHeight: 600
    };
  },
  created() {
    this.getDeptTree();
  },
  watch: {
    // 根据名称筛选树
    syTypeName(val) {
      this.$refs.tree.filter(val);
    },
    "form.symbolValue": function (val) {
      if (val == "07" || val == "08" || val == "09" || val == "10") {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    }
  },
  methods: {
    /** 查询判定依据主列表 */
    getList() {
      this.loading = true;
      listBsJudgeBase(this.queryParams).then((response) => {
        const rows = response.rows;
        for (let i = 0; i < rows.length; i++) {
          this.$set(rows[i], "parentName", this.currentNode.label);
        }
        this.bsJudgeBaseList = rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询树结构 */
    getDeptTree() {
      syTpyeTree().then((response) => {
        this.options = response.data;
      });
    },
    getTreeList() {
      this.loadingLeaf2 = true;
      listBsType(this.queryParams).then((response) => {
        const rows = response.rows;
        for (let i = 0; i < rows.length; i++) {
          this.$set(rows[i], "parentName", this.currentNode.label);
        }
        this.syTypeList = rows;
        this.total = response.total;
        this.loadingLeaf2 = false;
      });
    },
    getBiList() {
      if (!this.currentNode.parentId) {
        this.$alert("", "请选择试验类型", {
          confirmButtonText: "确定",
          type: "warning",
          center: true
        });
        return;
      }
      const params = {
        syType: this.currentNode.parentId
      };
      biList(params).then((response) => {
        this.biList = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelLeaf2() {
      this.openLeaf2 = false;
      this.resetLeaf2();
    },
    // 表单重置
    reset() {
      this.form = {
        // refQualId: undefined,
        itemName: undefined,
        symbolValue: undefined,
        num1: undefined,
        num2: undefined,
        remark: undefined
      };
      this.resetForm("form");
    },
    resetLeaf2() {
      this.formLeaf2 = {
        judgeId: undefined,
        judgeName: undefined,
        syType: undefined
      };
      this.resetForm("formLeaf2");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    handleAddLeaf2() {
      this.resetLeaf2();
      this.openLeaf2 = true;
      this.titleLeaf2 = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id;
      getDetail(id).then((response) => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    handleUpdateLeaf2(row) {
      this.loadingLeaf2 = true;
      this.resetLeaf2();
      const id = row.judgeId;
      getBsJudgeBase(id).then((response) => {
        this.loadingLeaf2 = false;
        this.formLeaf2 = response.data;
        this.openLeaf2 = true;
        this.titleLeaf2 = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 去除多余指标值
          const sv = this.form.symbolValue;
          if (!(sv == "07" || sv == "08" || sv == "09" || sv == "10")) {
            if (this.form.num2 != "") {
              this.form.num2 = "";
            }
          }
          this.form = {
            ...this.form,
            judgeBsId: this.queryParams.judgeBsId
          };
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateDetail(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDeptTree();
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addDetail(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getDeptTree();
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    submitFormLeaf2() {
      this.$refs["formLeaf2"].validate((valid) => {
        if (valid) {
          this.formLeaf2 = {
            ...this.formLeaf2,
            syType: this.currentNode.id
          };
          this.buttonLoadingLeaf2 = true;
          if (this.formLeaf2.judgeId != null) {
            updateBsJudgeBase(this.formLeaf2)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openLeaf2 = false;
                this.queryParams.judgeBsId = this.formLeaf2.judgeBsId;
                this.getDeptTree();
                this.getTreeList();
              })
              .finally(() => {
                this.buttonLoadingLeaf2 = false;
              });
          } else {
            addBsJudgeBase(this.formLeaf2)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.openLeaf2 = false;
                this.getDeptTree();
                this.getTreeList();
              })
              .finally(() => {
                this.buttonLoadingLeaf2 = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm("是否确认删除？")
        .then(() => {
          this.loading = true;
          return delDetail(id);
        })
        .then(() => {
          this.loading = false;
          this.getDeptTree();
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    handleDeleteLeaf2(row) {
      const id = row.judgeId;
      this.$modal
        .confirm("是否确认删除？")
        .then(() => {
          this.loadingLeaf2 = true;
          return delBsJudgeBase(id);
        })
        .then(() => {
          this.loadingLeaf2 = false;
          this.getDeptTree();
          this.getTreeList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {
          this.loadingLeaf2 = false;
        });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$set(this.currentNode, "id", data.id);
      this.$set(this.currentNode, "parentId", data.parentId);
      this.$set(this.currentNode, "label", data.label);
      this.$set(this.currentNode, "weight", data.weight);
      if (!!data.weight && data.weight.includes("detail")) {
        const arr = data.weight.split("-");
        this.queryParams.judgeBsId = arr[1];
        this.getBiList();
        this.getList();
        this.oneShow = true;
        this.twoShow = false;
        this.threeShow = false;
      } else if (!!data.weight && data.weight.includes("end")) {
        this.queryParams.parentId = data.id;
        this.getTreeList();
        this.twoShow = true;
        this.oneShow = false;
        this.threeShow = false;
      } else {
        this.queryParams.parentId = data.id;
        this.getTreeList();
        this.threeShow = true;
        this.oneShow = false;
        this.twoShow = false;
        // @TODO 测试接口
        // this.bsJudgeBaseTreeBySyType();
      }
    },
    bsJudgeBaseTreeBySyType() {
      const params = {
        syTypeId: this.currentNode.id
      };
      bsJudgeBaseTreeBySyType(params).then((response) => {
        console.log(1111111, params);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/demo.scss";
</style>
